﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>单个页面对表格的操作</title>
    <style type="text/css">
        table{width: 100%;float: left;border-collapse: collapse;font-size: 12px;font-family: 宋体;color: #333; table-layout:fixed;}
        table .header td{font-weight: bold;height: 34px;line-height: 34px;padding: 0px;background: #f2f2f2;}
        table tr td{border: 1px solid #ccc;text-align: center; padding: 5px 0; }   
        table tr td a:hover{text-decoration:underline;cursor:pointer;}
    </style>
   <script src="http://hsjdtech.com/inter/scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            
        });
        function bianji(statname, b, q, g) {
            $("#" + statname + "s").attr("disabled", "");
            $("#" + statname + "e").attr("disabled", "");
            document.getElementById(statname + "s").disabled = '';
            document.getElementById(statname + "e").disabled = '';
            $("#" + g).css("display", "");
            $("#" + q).css("display", "");
            $("#" + b).css("display", "none");
        }
        function quxiao(statname, b, q, g) {
            $("#" + statname + "s").attr("disabled", "disabled");
            $("#" + statname + "e").attr("disabled", "disabled");
            document.getElementById(statname + "s").disabled = 'disabled';
            document.getElementById(statname + "e").disabled = 'disabled';
            $("#" + g).css("display", "none");
            $("#" + q).css("display", "none");
            $("#" + b).css("display", "");
        }
        function updata(statname, b, q, g, zstatname, oldstime, oldetime) {
            var stime = $("#" + statname + "s").val();
            var etime = $("#" + statname + "e").val();
            var mainclass = $("#" + statname + "m").val();
            alert("更新成功！");
        }
        function addInject(awsID) {
            var stime = $("#addStarttime").val();
            var etime = $("#addEndtime").val();
            var mainclass = $("#addMainclass").val();
            if (stime == "") { alert("请填写出苗期！"); return; }
            else if (etime == "") { alert("请填写收获期"); return; }
            alert("添加！");
        }
        function deleteInjectTime(awsID, startTime, endTime) {
            if (confirm("删除该监测期间,将删除该期间侵染曲线,是否继续？")) {
                alert("删除失败！");
            }
        }
    </script>
</head>
<body style="margin: 0px; padding: 0px;">
  <div style="height: 300px; width: 600px; float: none; margin-left: auto; margin-right: auto;margin-top: 10px; overflow-y: auto;">
     <table>
        <thead class="header"><tr><td>编辑</td><td>删除</td><td>字段一</td><td>字段二</td></tr></thead>
        <tbody id="tbody">
            <tr>
                <td>
                    <a href="#" style="color: red; display: none;" onclick="updata('ID1','0b','0q','0g','ID1','2019-08-18','2019-11-29')" id="0g">更新</a>
                    <a href="#" style="color: red;" onclick="bianji('ID1','0b','0q','0g')" id="0b">编辑</a>
                    <a href="#" style="color: red; display: none;" onclick="quxiao('ID1','0b','0q','0g')" id="0q">取消</a>
                </td>
                <td><a href="#" style="color:red;" onclick="deleteInjectTime('ID1','2019-08-18','2019-11-29')">删除</a></td>
                <td><input style="width:80px;" type="text" id="ID1s" value="value1" disabled="disabled"/></td>
                <td><input style="width:80px;" type="text" id="ID1e" value="value2" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>
                    <a href="#" style="color: red; display: none;" onclick="updata('ID2','1b','1q','1g','ID2','2019-08-18','2019-11-29')" id="1g">更新</a>
                    <a href="#" style="color: red;" onclick="bianji('ID2','1b','1q','1g')" id="1b">编辑</a>
                    <a href="#" style="color: red; display: none;" onclick="quxiao('ID2','1b','1q','1g')" id="1q">取消</a>
                </td>
                <td><a href="#" style="color:red;" onclick="deleteInjectTime('ID2','2019-08-18','2019-11-29')">删除</a></td>
                <td><input style="width:80px;" type="text" id="ID2s" value="value1" disabled="disabled"/></td>
                <td><input style="width:80px;" type="text" id="ID2e" value="value2" disabled="disabled"/></td>
            </tr>
            <tr>
                <td>
                    <span onclick="addInject('ID')" style="cursor:pointer; font-size:12px; color:red; font-weight:bold;" title="添加监测期">增加</span>
                </td>
                <td></td>
                <td><input style="width:80px;" type="text" id="addStarttime" /></td>
                <td><input style="width:80px;" type="text" id="addEndtime" /></td>
            </tr>
        </tbody>
     </table>
  </div>
</body>
</html>
